<!-- Update 29.9.2015: <head></head> and <body></body> tags are included in this pen for quick copy/paste in case you to try this challenge offline -->

<head>
  <title>Infinito Web Design Studio</title>

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container topnav">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand topnav" href="http://virtual-dawn.com/index_english.html" target="_blank">Thiago Ferreira</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#home">Home</a>
          </li>
          <li>
            <a href="#about">About</a>
          </li>
          <li>
            <a href="#portfolio">Portfolio</a>
          </li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>


  <!-- Header -->
  <a name="home"></a>
  <div class="intro-header">
    <div class="bg-overlay">
      <div class="container">


        <div class="row">
          <div class="col-lg-12">
            <div class="intro-message">
              <h1>Infinito Web Design Studio</h1>
              <h3>Where Awesomeness Is Brought To Life.</h3>
              <hr class="intro-divider">
              <ul class="list-inline intro-social-buttons">
                <li>
                  <a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                </li>
                <li>
                  <a href="https://github.com/ThiagoFerreir4" target="_blank" class="btn btn-default btn-lg "><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
                </li>
                <li>
                  <a href="https://www.linkedin.com/in/thiagoferreir4" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
                </li>
                <li>
                  <a href="http://www.freecodecamp.com/thiagoferreira" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span></a>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>
      <!-- /.container -->
    </div>
  </div>
  <!-- /.intro-header -->

  <!-- Page Content -->

  <a name="about"></a>
  <div class="content-section-a">
    <div class="bg-overlay2">
      <div class="container">
        <div class="row">
          <div class="col-lg-5 col-sm-6">

            <div class="clearfix"></div>
            <h2 class="section-heading">Infinito Web Design Studio.</h2>
            </br>
            <p class="lead">I'm a <a class="link" target="_blank" href="http://www.freecodecamp.com/thiagoferreira">self taught</a> web designer, developer, co-founder and entrepreneur based in Finland.</br>
              I'm currently part of a small web development team in an upcoming start-up, building web and mobile applications.</br>
              My passion is to use technology based solutions, to help solve real world challenges.</br>
              Competences:</br>
              Languages and Frameworks:</br>
              Javascript, HTML5, CSS3, jQuery, Bootstrap3, Angular.js, Meteor.js.</br>
              Tools & expertise:</br>
              Git, Responsive Web Design, Agile Methodologies.
            </p>
          </div>
          <div class="col-lg-5 col-lg-offset-2 col-sm-6 collapse navbar-collapse">
            <img class="img-circle img-responsive" src="https://41.media.tumblr.com/ccd0e1b1bdb3492eecdac39b8d42d7ad/tumblr_nwh4pmSv8k1ud7rr3o1_400.jpg" alt="">
          </div>
        </div>

      </div>
      <!-- /.container -->
    </div>
  </div>
  </div>

  <!-- Portfolio Grid Section -->
  <a name="portfolio"></a>
  <section id="portfolio" class="bg-light-gray bounds">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading">Awesomeness Portfolio.</h2>
          <h3 id="below-section" class="section-subheading text-muted">Below you'll find some of my recent work.</h3>
        </div>
      </div>
      <!-- Portfolio img1 -->
      <div class="row">
        <div class="col-md-4 col-sm-6 portfolio-item">
          <a href="http://codepen.io/ThiagoFerreir4/full/gpvJOK" target="_blank" class="portfolio-link" data-toggle="modal">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <i class="fa fa-fire fa-3x"></i>
              </div>
            </div>
            <img src="https://36.media.tumblr.com/a4a06b925ad2ad936ba2ce6c3343c444/tumblr_nwh4epTtMV1ud7rr3o1_1280.jpg" class="img-responsive" alt="">
          </a>
          <div class="portfolio-caption">
            <h4>Twitch.tv API project</h4>
            <p id="small-text" class="text-muted">Bootstrap and Angularjs</p>
          </div>
        </div>
        <!-- End of Portfolio img1 -->

        <!-- Portfolio img2 -->
        <div class="col-md-4 col-sm-6 portfolio-item portfolio2">
          <a href="http://codepen.io/ThiagoFerreir4/full/vOyXre" class="portfolio-link" target="_blank" data-toggle="modal">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <i class="fa fa-fire fa-3x"></i>
              </div>
            </div>
            <img src="https://40.media.tumblr.com/a73e79ce9844761d7cdc93d202b5cea1/tumblr_nwh4iomduD1ud7rr3o1_1280.jpg" class="img-responsive" alt="">
          </a>
          <div class="portfolio-caption">
            <h4>Wikipedia Search Engine</h4>
            <p id="small-text" class="text-muted">Bootstrap and jQuery</p>
          </div>
        </div>
        <!-- End of Portfolio img2 -->

        <!-- Portfolio img3 -->
        <div class="col-md-4 col-sm-6 portfolio-item">
          <a href="http://codepen.io/ThiagoFerreir4/full/QbKWGO" target="_blank" class="portfolio-link" data-toggle="modal">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <i class="fa fa-fire fa-3x"></i>
              </div>
            </div>
            <img src="https://41.media.tumblr.com/5abea52ea28e9ea20ab995ebd23299a1/tumblr_nwh4iomduD1ud7rr3o2_1280.jpg" class="img-responsive" alt="">
          </a>
          <div class="portfolio-caption">
            <h4>Stainless Steel Calculator</h4>
            <p id="small-text" class="text-muted">SCSS and Vanilla Javascript</p>
          </div>
        </div>
        <!-- End of Portfolio img3 -->

        <!-- Portfolio img4 -->
        <div class="col-md-4 col-sm-6 portfolio-item">
          <a href="http://codepen.io/ThiagoFerreir4/full/vOaRQz/" target="_blank" class="portfolio-link" data-toggle="modal">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <i class="fa fa-fire fa-3x"></i>
              </div>
            </div>
            <img src="https://40.media.tumblr.com/7512ad23b7e68304a65182988b9c804a/tumblr_nwy76xfEXi1ud7rr3o1_1280.png" class="img-responsive" alt="">
          </a>
          <div class="portfolio-caption">
            <h4>Pomodoro Timer Zipline</h4>
            <p id="small-text" class="text-muted">Bootstrap and Angular.js</p>
          </div>
        </div>
        <!-- End of Portfolio img4 -->

        <!-- Portfolio img5 -->
        <div class="col-md-4 col-sm-6 portfolio-item">
          <a href="http://codepen.io/ThiagoFerreir4/full/oXwKJV" target="_blank" class="portfolio-link" data-toggle="modal">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <i class="fa fa-fire fa-3x"></i>
              </div>
            </div>
            <img src="https://41.media.tumblr.com/59b50efb8f7435fef9f87fd871b90d7a/tumblr_nxhm4k1jI81ud7rr3o1_1280.jpg" class="img-responsive" alt="">
          </a>
          <div class="portfolio-caption">
            <h4>Weather App</h4>
            <p id="small-text" class="text-muted">Bootstrap and Vanilla Javascript</p>
          </div>
        </div>
        <!-- End of Portfolio img5 -->

        <!-- Portfolio img6 -->
        <div class="col-md-4 col-sm-6 portfolio-item">
          <a href="http://codepen.io/ThiagoFerreir4/full/EjwGoX/" target="_blank" class="portfolio-link" data-toggle="modal">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <i class="fa fa-fire fa-3x"></i>
              </div>
            </div>
            <img src="https://36.media.tumblr.com/030b4966650a0d1dac0bbcca6fe572e8/tumblr_nxhm7qz6Y91ud7rr3o1_1280.jpg" class="img-responsive" alt="">
          </a>
          <div class="portfolio-caption">
            <h4>Pacman Tic Tac Toe</h4>
            <p id="small-text" class="text-muted">CSS and jQuery</p>
          </div>
        </div>
        <!-- End of Portfolio img6 -->
      </div>
    </div>
  </section>

  <a name="contact"></a>
  <div class="banner">
    <div class="bg-overlay4">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <h2 class="connect">Connect with Infinito Web Design Studio: thiagoferreira.mail@gmail.com</h2>
          </div>
          </br>
          <div class="col-lg-6">
            <ul class="list-inline banner-social-buttons">
              <li>
                <a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
              </li>
              <li>
                <a href="https://github.com/ThiagoFerreir4" target="_blank" class="btn btn-default btn-lg "><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
              </li>
              <li>
                <a href="https://www.linkedin.com/in/thiagoferreir4" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
              </li>
              <li>
                <a href="http://www.freecodecamp.com/thiagoferreira" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span></a>
              </li>
            </ul>
          </div>
        </div>
        <!-- /.container -->
      </div>
    </div>
  </div>
  </div>
  <!-- /.banner -->

  <!-- Footer -->
  <footer>

    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <ul class="list-inline">
            <li>
              <a href="#">Home</a>
            </li>
            <li class="footer-menu-divider">&sdot;</li>
            <li>
              <a href="#about">About</a>
            </li>
            <li class="footer-menu-divider">&sdot;</li>
            <li>
              <a href="#portfolio">Portfolio</a>
            </li>
            <li class="footer-menu-divider">&sdot;</li>
            <li>
              <a href="#contact">Contact</a>
            </li>
          </ul>
          <p class="copyright text-muted small">Copyright &copy; Infinito Web Design Studio 2015. All Rights Reserved</p>
        </div>
      </div>
    </div>
  </footer>



</body>